<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
  <%-- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
    <!DOCTYPE html>
    <html>

    <head>
      <meta charset="UTF-8">
      <title>Insert title here</title>
      <style>
        body {
          background: url('img/login.jpg') no-repeat;
          /* 或 contain，根据需要选择合适的值 */
          /* background-size: cover; */

          background-position: center center;
          /* 让背景图像水平和垂直居中 */
          background-size: 100% 160%;
        }

        #login_box {
          width: 300px;
          height: 400px;
          background-color: #00000060;
          margin: auto;
          margin-top: 100px;
          text-align: center;
          border-radius: 10px;
          padding: 50px 50px;
        }

        h2 {
          color: #ffffff90;
          margin-top: 50px;
        }

        #input-box {
          margin-top: 50px;
        }



        input {
          border: 0;
          width: 60%;
          font-size: 15px;
          color: #fff;
          background: transparent;
          border-bottom: 2px solid #fff;
          padding: 5px 10px;
          outline: none;
          margin-top: 0px;
        }

        button {
          margin-top: 100px;
          width: 100px;
          height: 30px;
          border-radius: 10px;
          border: 0;
          color: #fff;
          text-align: center;
          line-height: 30px;
          font-size: 15px;
          background-image: linear-gradient(to right, #30cfd0, #330867);
        }

        button>a {
          color: #330867;
        }

        #sign_up {
          margin-top: 45%;
          margin-left: 60%;
        }

        .container {
          height: 30px;
          width: 250px;
          position: relative;
          left: 150px;
          top: 60px;
          transform: translate(-50%, -50%);
        }

        input {
          width: 100%;
          height: 100%;
          position: relative;
          outline: none;
          border: none;
          box-sizing: border-box;
          padding-left: 5px;
          background-color: #282c34;
          color: #61dafb;
          caret-color: #61dafb;
        }

        input::placeholder {
          color: #61dafb;
        }

        span {
          position: absolute;
          content: "";
          display: block;
          background-color: #61dafb;
          transition: transform .1s ease-in-out;
        }

        .top,
        .bottom {
          left: 0px;
          right: 0px;
          height: 2px;
          top: 30px;
        }

        .left,
        .right {
          top: 0px;
          bottom: 0px;
          width: 2px;
          transform: scaleY(0);
        }

        .top {
          top: 0px;
          transform: scaleX(0);
          transform-origin: left center;
          transition-delay: .2s;
        }

        .left {

          left: 0px;
          transform-origin: bottom center;
          transition-delay: .3s;
        }

        .bottom {
          bottom: 0px;
        }

        .right {

          right: 0px;
          transform-origin: top center;
          transition-delay: .1s;
        }

        input:focus~.right {
          transform: scaleY(1);
          transform-origin: bottom center;
        }

        input:focus~.left {
          transform: scaleY(1);
          transform-origin: top center;
        }

        input:focus~.top {
          transform: scaleY(1);
          transform-origin: right center;
        }

        .container1 {
          height: 30px;
          width: 250px;
          position: relative;
          left: 150px;
          top: 100px;
          transform: translate(-50%, -50%);
        }

        .cipher {
          font-size: 12px;
          position: relative;
          top: 85px;
          left: 90px;
          color: #61dafb;
        }

        .cipher1 {
          font-size: 14px;
          position: relative;
          top: 195px;
          left: 0px;
          color: #ffffff;
        }

        .cipher1-1 {
          color: #61dafb;
        }

        a {
          text-decoration: none;
        }

        .form {
          font-size: 16px;
          position: relative;
          top: 110px;
          left: -80px;
          color: #61dafb;
        }

        .form-input {
          width: 20px;
          height: 20px;
        }

        .form-label {
          position: relative;
          bottom: 5px;
        }
      </style>
    </head>

    <body>
      <div id="login_box">
        <h2>Login</h2>
        <form action="control.jsp" method="post">
          <div class="container">
            <input type="text" placeholder="请输入用户名" type="text" name="username">
            <span class="left"></span>
            <span class="right"></span>
            <span class="top"></span>
            <span class="bottom"></span>
          </div>
          <div class="container1">
            <input type="password" placeholder="请输入密码" type="text" name="pwd">
            <span class="left"></span>
            <span class="right"></span>
            <span class="top"></span>
            <span class="bottom"></span>
          </div>
          <div class="form">
            <input class="form-input" type="checkbox" name="remember" value="true" />
            <%-- <label class="form-label" for="rememberMe">记住密码</label>--%>
          </div>
          <div>
            <a class="cipher" href="#">忘记密码？</a>
          </div>
          <div class="cipher1">
            如果没有用户，那就<a class="cipher1-1" href="../chp6/addmyuser01.jsp">注册</a>一个
          </div>
          <button><a type="submit" value="登录">登录</a><br></button><br>
        
      </form>
    </div>
      <c:if test="${not empty param.error and param.error eq '1'}">
        <h3 style="color:red;">用户名或者密码错误</h3>
      </c:if>
      <c:if test="${not empty param.error and param.error eq '2'}">
        <h3 style="color:red;">用户名没有登录</h3>
      </c:if>
      <c:if test="${not empty param.error and param.error eq '3'}">
        <h3 style="color:red;">用户名没有权限</h3>
      </c:if>
    </body>

    </html>